<!DOCTYPE html>
<html>

<head lang="en">
	<title>找攻略</title>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="/js/bootstrap/css/bootstrap.min.css">
	<script src="/js/jquery/jquery.min.js"></script>
	<script src="/js/bootstrap/js/bootstrap.min.js"></script>
	<link rel="stylesheet" href="/css/font/css/font-awesome.min.css" />
	<link rel="stylesheet" href="/css/reset.css" />
	<link rel="stylesheet" href="/css/strategy.css" />
	<script src="/js/plugins/jrender/jrender.min.js"></script>
	<link rel="stylesheet" href="js/plugins/ui/jquery-ui.min.css">
	<script src="js/plugins/ui/jquery-ui.min.js"></script>
	<link rel="stylesheet" href="js/plugins/ui/jquery-ui.theme.min.css">
	<link rel="stylesheet" href="/js/plugins/dialog2/dialog.css">
	<script src="/js/plugins/dialog2/dialog.min.js"></script>

</head>


<body>
	<div class="search-head">
		<div class="row nav-search">
			<div class="col-2">
				<a href="index.html">
					<span><i class="fa fa-chevron-left fa-2x"></i></span>
				</a>
			</div>
			<div class="col-10  ui-widget">
				<div class="input-group-sm search">
					<input type="search" class="form-control searchBtn" id="tags" placeholder="找攻略" onsearch="myFunction()">
				</div>
			</div>
		</div>
	</div>

	<ul class="nav nav-pills nav-justified border border-left-0 border-top-0 border-right-0" id="pills-tab" role="tablist">
		<!--推荐导航栏-->
		<li class="nav-item">
			<a class="nav-link active show" id="pills-top-tab" data-toggle="pill" href="#pills-top">
				<span style="font-weight: bold;">推荐</span>
			</a>
		</li>
	</ul>

	<div class="tab-content" id="pills-tabContent">
		<!--推荐导航栏的具体内容-->
		<div class="tab-pane fade active show" id="pills-top">

			<!--自动换页功能-->
			<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
				<div id="strategyCommends">
					<div  class="carousel-inner" render-loop="list">
						<div class="carousel-item">
							<div class="border commend">
								<a href="/travelContent.html?id=" render-fun="setHref" render-key="list.travelId">
									<img render-src="list.commendCoverUrl" width="100%" height="200px">
									<small render-html="list.commendTitle"></small>
								</a>
							</div>
						</div>
					</div>
				</div>

				<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
					<span class="carousel-control-prev-icon" aria-hidden="true"></span>
					<span class="sr-only"></span>
				</a>
				<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
					<span class="carousel-control-next-icon" aria-hidden="true"></span>
					<span class="sr-only"></span>
				</a>
			</div>


			<hr>


			<div class="container strategyCommend">
				<h6>推荐</h6>
				<div class="row hot" render-loop="list">

					<div class="col-4">
						<a href="/strategyCatalogs.html?id=" render-fun="setHref" render-key="list.id">
							<img  render-src="list.coverUrl">
							<p render-html="list.title"></p>
						</a>
					</div>

				</div>
			</div>
		</div>


	</div>


	<script>
		$(function () {
		    //清空搜索框
            $("#tags").val("");

		    //发送异步请求,获取状态为推荐的地区,并且贴到导航栏中---同步拼接内容
			$.get("/regions/1",function (data) {
                //console.log(data);
                var html="";
                var content="";
                $.each(data.list,function (index, ele) {
                    html+='<li class="nav-item"><a data-id="'+ele.id+'" class="nav-link" id="pills-'+ele.id+'-tab" data-toggle="pill" href="#pills-'+ele.id+'">'+ele.name+'</a></li>'
                    content+='<div class="tab-pane fade" id="pills-'+ele.id+'"></div>'
                })
                $("#pills-tab").append(html);
                $("#pills-tabContent").append(content);

            });


			//发送请求查询攻略游记----------------------------------
            $.get("/travels/commends",{type:3,pageSize:3},function (data) {
                //console.log(data);
                $("#strategyCommends").renderValues(data,{
                    setHref:function (item, value) {
                        $(item).attr("href",($(item).attr("href")+value));
                    }
                })
                $(".carousel-item:first").addClass("active");
            })

			//循环遍历当季攻略(大攻略中状态为推荐的攻略)--------------------------
			$.get("/strategies",{state:2},function (data) {
                //console.log(data);
                $(".strategyCommend").renderValues(data,{
                    setHref:function (item, value) {
                        $(item).attr("href",($(item).attr("href")+value));
                    }
                })
            })

            //地区页面显示--显示当季推荐攻略和该地区的全部攻略
            //点击任意的地区按钮,发送异步请求查询---由于是动态拼接的,所以需要利用jquery的动态绑定事件
            var regionId;
            var currentPage =2;
            var totalPage=2;

            $("#pills-tab").on("click",".nav-link",function () {
                currentPage=2;
                regionId = $(this).data("id");
                if(regionId){
					$.get("/regions/"+regionId+"/strategies",{pageSize:6},function (data) {
                    	//console.log(data);
                    	$("#pills-"+regionId).html(data);
					},"html")
                }

            });
            setTimeout(function () {
                console.log(regionId);
            },2000);




            //滚动时重新发送请求查询,拼接即可
            //jrender渲染数据
            function query() {
                if(regionId){
                    $.get("/regions/"+regionId+"/strategies",{currentPage:currentPage,pageSize:6},function (data) {

                        var html= ""
                        $.each(data.list,function (index, ele) {
                            html +=  '<div class="col-6 mb">'+
                                '<a href="/strategyCatalogs.html?id='+ele.id+'">'+
                                '<img class="float-left " src="'+ele.coverUrl+'">'+
                                '<div class="classify-text">'+
                                '<span>'+ele.subTitle+'</span>'+
                                '<p>0人收藏</p>'+
                                '</div>'+
                                '</a>'+
                                '</div>'
                        })
                        $(".classify").append(html);

                        currentPage +=1;
                        totalPage = data.pages;
                    },"json")
				}


            }


			//分页的条件:屏幕的高度+滑动的高度>=文档的高度

			$(window).scroll(function () {
				if($(window).height()+$(window).scrollTop()>=$(document).height()){
					//console.log($(window).height());console.log($(window).scrollTop());console.log($(document).height());
					//判断当前页是否小于等于总页数
					if(currentPage<=totalPage){
						query();
					}else{
						$(document).dialog({
							type : 'notice',
							infoText: '亲.我也是有限度的',
							autoClose: 2500,
							position: 'bottom'  // center: 居中; bottom: 底部
						});
					}
				}
			})










            //注意发送ajax请求需要时间(滞后性)-----------------------找攻略搜索框------------
            $.get("/strategies/search",function (data) {
                //console.log(data);
                var availableTags=data
                $( "#tags" ).autocomplete({
                    source: availableTags
                });

            })


        })

        function myFunction(){
		    var title =$("#tags").val();
            //console.log(title);
            $.get("/strategies/titles",{title:title},function (data) {
				setTimeout(function () {
                    location.href="/strategyCatalogs.html?id="+data.id;
                },1000)
            })

        }

	</script>


</body>

</html>